<template>
  <div>
    <el-form-item
      label="日期格式:"
      :rules="[
        { required: true, message: '请选择日期格式', trigger: 'change' },
      ]"
    >
      <el-select
        v-model="dateFormat"
        placeholder="日期格式"
        style="width: 300px"
        @change="(val) => handelChange(val, 'formatType')"
      >
        <el-option
          :value="i.format"
          :label="i.label"
          v-for="(i, index) in formatList"
          :key="index"
        ></el-option>
        <el-option value="-1" label="自定义"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      :rules="[
        { required: true, message: '请选择自定义日期格式', trigger: 'change' },
      ]"
      label="自定义日期格式:"
      v-if="dateFormat === '-1'"
    >
      <LabelExpression
        @change="handelChange"
        style="width: 340px"
        v-model="formatReg"
        :fields="fieldList"
        :symbols="symbols"
      />
    </el-form-item>
  </div>
</template>
<script>
import LabelExpression from "@/components/LabelExpression";
export default {
  name: "DateConfig",
  components: {
    LabelExpression,
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dateFormat: "",
      formatReg: "",
      formatEnum: [
        "yyyy",
        "yyyy-MM",
        "yyyy-MM-dd",
        "yyyy-MM-dd HH:mm",
        "yyyy-MM-dd HH:mm:ss",
      ],
      formatList: [
        {
          format: "yyyy",
          label: "年",
        },
        {
          format: "yyyy-MM",
          label: "年-月",
        },

        {
          format: "yyyy-MM-dd",
          label: "年-月-日",
        },
        {
          format: "yyyy-MM-dd HH:mm",
          label: "年-月-日 时:分",
        },
        {
          format: "yyyy-MM-dd HH:mm:ss",
          label: "年-月-日 时:分:秒",
        },
      ],
      fieldList: [
        {
          label: "年",
          value: "yyyy",
        },
        {
          label: "年",
          value: "yy",
        },
        {
          label: "月",
          value: "MM",
        },
        {
          label: "月",
          value: "M",
        },
        {
          label: "日",
          value: "dd",
        },
        {
          label: "日",
          value: "d",
        },
        {
          label: "时",
          value: "HH",
        },
        {
          label: "时",
          value: "H",
        },
        {
          label: "分",
          value: "mm",
        },
        {
          label: "分",
          value: "m",
        },
        {
          label: "秒",
          value: "ss",
        },
        {
          label: "秒",
          value: "s",
        },
        {
          label: "毫秒",
          value: "SSS",
        },
        {
          label: "毫秒",
          value: "SS",
        },
        {
          label: "毫秒",
          value: "S",
        },
      ],
      symbols: ["-", "/", "_", "[", "]"],
    };
  },
  watch: {
    value: {
      handler(value) {
        this.init(value);
      },
      immediate: true,
    },
  },
  methods: {
    init(value) {
      this.dateFormat = this.formatEnum.includes(value.dateFormat)
        ? value.dateFormat
        : "-1";
      if (this.dateFormat === "-1") {
        this.formatReg = value.dateFormat;
      }
    },
    handelChange(val, isFormatType) {
      if (isFormatType === "formatType" && val === "-1") {
        this.value.dateFormat = "";
      } else {
        this.value.dateFormat = val;
      }
    },
  },
};
</script>